﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>PetUI 测试网页</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
    <script src="PetUI.js"></script>
    <script src="PetUI_Lib.js"></script>
    <link link rel="stylesheet" type="text/css" href="PetUI_Lib.css">
    <script src="x0p/x0p.js"></script>
    <link link rel="stylesheet" type="text/css" href="x0p/x0p.css">
    </style>
    <script>
        window.onload = function () {
            PetUI.BanMenu() // 禁止菜单
            PetUI.Create('div').CSS({
                'margin-top': '10px'
            }).Child().innerText = "平台: " + (PetUI.IsPC() ? "PC测试" : "移动端测试");
            PetUI.Create('div').CSS({
                'margin-top': '10px'
            }).Child().innerText = "事件模式: " + (PetUI.HasTouch() ? "触摸支持" : "鼠标支持");
            /**
             *  测试代码
             */
            // 按钮测试
            PetUI.Create('div').CSS({
                'margin-top': '10px'
            }).Child().innerText = "按钮测试";
            // 创建容器
            var div = PetUI.Create('div').CSS({
                'margin-top': '10px'
            }).Child();
            // 添加按钮
            div.Add(PetUI.Button("默认样式"))
            div.Add(PetUI.Button("颜色样式"), {
                Class: ["Red", "HoverGray"]
            })
            div.Add(PetUI.Button("阴影样式"), {
                Class: "Shadow"
            })
            div.Add(PetUI.Button(""), {
                Class: ["Arrows"],
                innerHTML: "<span>箭头动画</span>"
            })
            // 选择按钮
            PetUI.Create('div', {
                CSS: 'margin-top:10px'
            }).Child().innerText = "选择按钮";
            // 容器
            var Selection = PetUI.Create('div', {
                CSS: 'margin-top:10px'
            }).Child();
            // 创建
            Selection.Add(PetUI.Selection("默认样式"), {
                Checked: true,
                CSS: "display:inline"
            }).Add(PetUI.Selection("样式一"), {
                Class: PetUI.Selection.style[0],
                CSS: "display:inline",
                Checked: true
            }).Add(PetUI.Selection("样式二"), {
                Class: PetUI.Selection.style[1],
                CSS: "display:inline",
                Checked: true
            }).Add(PetUI.Selection("样式三"), {
                Class: PetUI.Selection.style[2],
                CSS: "display:inline",
                Checked: true
            }).Add(PetUI.Selection("样式四"), {
                Class: PetUI.Selection.style[3],
                CSS: "display:inline",
                Checked: true
            }).Add(PetUI.Selection("样式五"), {
                Class: PetUI.Selection.style[4],
                CSS: "display:inline",
                Checked: true
            }).Add(PetUI.Selection("发光效果"), {
                Click: ($) => {
                    var nodes = Selection.childNodes;
                    for (var i in nodes) {
                        if (nodes.hasOwnProperty(i)) {
                            nodes[i].Class("CloseGlowing", !$.Checked);
                        }
                    }
                }
            })
            // 进度条测试
            PetUI.Create('div', {
                CSS: 'margin-top:10px'
            }).Child().innerText = "进度条测试";
            var PetUIdiv = PetUI.Create('div', {
                CSS: 'margin-top:10px'
            }).Child();
            PetUIdiv.Add(PetUI.ProgressBar('200px', 30))
            PetUIdiv.Add(PetUI.ProgressBar('200px', 40), {
                ClassColop: 'color-1'
            })
            PetUIdiv.Add(PetUI.ProgressBar('200px', 50), {
                ClassColop: 'color-2'
            })
            PetUIdiv.Add(PetUI.ProgressBar('200px', 60), {
                ClassColop: 'color-3'
            })
            PetUIdiv.Add(PetUI.ProgressBar('200px', 70), {
                ClassColop: 'color-4'
            })
            PetUIdiv.Add(PetUI.ProgressBar('200px', 80), {
                ClassColop: 'color-5'
            })
            PetUIdiv.Add(PetUI.ProgressBar('200px', 60), {
                ClassColop: 'color-6'
            })
            PetUIdiv.Add(PetUI.ProgressBar('200px', 70), {
                ClassColop: 'color-7'
            })
            PetUIdiv.Add(PetUI.ProgressBar('200px', 80), {
                ClassColop: 'color-8'
            })
            PetUIdiv.Add(PetUI.Selection("发光效果"), {
                CSS: "display:inline",
                Click: ($) => {
                    var nodes = PetUIdiv.childNodes;
                    for (var i in nodes) {
                        if (nodes.hasOwnProperty(i)) {
                            nodes[i].Class("CloseGlowing", !$.Checked);
                        }
                    }
                }
            })
            PetUIdiv.Add(PetUI.Selection("开启动画"), {
                CSS: "display:inline",
                Click: ($) => {
                    var nodes = PetUIdiv.childNodes;
                    for (var i in nodes) {
                        if (nodes.hasOwnProperty(i)) {
                            nodes[i].Class("BackgroundAnime", $.Checked);
                        }
                    }
                }
            })
            // 圆形进度条
            PetUI.Create('div', {
                CSS: 'margin-top:10px'
            }).Child().innerText = "圆形进度条";
            var Pbr = PetUI.ProgressBarRound(50).Child();
            // 进度条动画
            PetUI.Create('div', {
                CSS: 'margin-top:10px'
            }).Child().innerText = "进度条动画";
            var Pb = PetUI.ProgressBar('200px');
            Pb.ClassColop('color-5');
            PetUI.Create('div', {
                CSS: 'margin-top:10px'
            }).Add(
                PetUI.Button("20%"), {
                    Click: (e) => {
                        Pb.Percent(20)
                    }
                }
            ).Add(
                PetUI.Button("90%"), {
                    Click: (e) => {
                        Pb.Percent(90)
                    }
                }
            ).Add(Pb).Child()
            // 导航栏
            var Navbar = PetUI.Navbar().Child(true);
            var caid = Navbar.Submenu("菜单一").SetSubmenu(); // 创建子菜单
            var caid1 = Navbar.Submenu("菜单二");
            var caid3 = Navbar.Submenu("菜单三");
            // 菜单设置
            var n1 = caid.Submenu("父菜单一");
            var n2 = caid.Submenu("父菜单二");
            var n1_1 = n1.Submenu("子级菜单一");
            var n1_2 = n1.Submenu("子级菜单二");
            // 提示
            PetUI.Create('div', {
                CSS: 'margin-top:10px'
            }).Child().innerText = "提示";
            var Prompt = PetUI.Button("提示").Child();
            Prompt.Click = (e) => {
                PetUI.Prompt("提示喵~")
            };
            // x0popup 提示插件
            PetUI.Create('div', {
                CSS: 'margin-top:10px'
            }).Child().innerText = "x0popup 提示插件";
            // 提示
            PetUI.Button("提示").Child().Click = (e) => {
                PetUI.x0p('标题', "提示信息")
            };
            // 带确认提示
            PetUI.Button("带确认提示").Child().Click = (e) => {
                PetUI.x0p('标题', "提示信息", "warning")
            };
            // 元素移动测试
            var move = PetUI.Create('div').CSS({
                'margin-top': '10px',
                'background-color': '#f44336'
            }).Child()
            move.UI.Move = true
            move.UI.RelativeSize= true
            move.innerText = "移动测试"
        };
    </script>
</head>

<body>
</body>

</html>